<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#servletContext.getContextPath()+'/'}">
    <link rel="icon" type="shortcut icon" th:href="@{/static/img/favicon.ico}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/login.css}"/>
    <script th:src="@{/static/js/jquery-3.1.0.min.js}"></script>
    <script th:src="@{/static/js/popper.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/js/global.js}"></script>
    <script th:src="@{/static/js/register.js}"></script>
    <script th:src="@{/jquery/http.js}"></script>
    <script type="text/javascript">
        function deleteSysUser(id) {
            let tip = window.confirm("确定要删除该数据吗?");
            if(tip){
                $.ajax({
                    url: "SystemUserController/delete/"+id,
                    // timeout: 3000,
                    type: "GET",
                    dataType: "JSON",
                    contentType: "application/json",
                    success: function (data) {
                        alert(data.msg);
                        setTimeout(function () {
                            location.reload();
                        },2000);
                        console.log(data);
                    }
                });
            }
        }
        function jumpPage(){
            var pageNum = $("#jumpPage").val();
            console.log(pageNum);
            let pageMax = [[${page.pages}]];
            if (pageNum <= 0){
                alert("请传入合法的页数");
            }else if (pageNum > pageMax){
                alert("输入页数超过范围");
            }else if(pageNum >= 1 && pageNum <= pageMax){
                location.href = "SystemUserController/systemUserPage/" + pageNum;
            }else {
                location.href = "SystemUserController/systemUserPage/1";
            }

        }

        $(function () {
            $("#sysUserCheckFlag").change(function () {
                // 1.获取当前的状态值
                var val = $(this).prop("checked");
                console.log(val);

                // 2.获取需要被选中的元素
                $(".sysUserCheck").each(function () {
                    $(this).prop("checked", val);
                })
            });

            $("#sysUserBatchDel").click(function () {
                var array = new Array();
                // 获取用户勾选的数据
                $(".sysUserCheck:checked").each(function () {
                    // 把数组放到数组中
                    array.push($(this).val());
                })

                sendRequest("SystemUserController/batchDel", array, function (data) {
                    if (data.code == 200) {
                        location.reload();
                    }
                });

            });
        })
    </script>
</head>
<body>

<a href="system/sysUser/sysUserAdd.html">添加</a>
<button class="button btn-danger" id="sysUserBatchDel">批量删除</button>
<table class="table">
    <tr>
        <th>
            <input type="checkbox" id="sysUserCheckFlag">
        </th>
        <th>id</th>
        <th>username</th>
        <th>sex</th>
        <th>email</th>
        <th>birthday</th>
        <th>操作</th>
    </tr>

    <tr th:each="sysUser:${page.records}">
        <td>
            <input class="sysUserCheck" type="checkbox" th:value="${sysUser.id}">
        </td>
        <td th:text="${sysUser.id}"/>
        <td th:text="${sysUser.username}"/>
        <td th:text="${sysUser.sex == 1?'男':'女'}"/>
        <td th:text="${sysUser.email}"/>
        <td th:text="${#dates.format(sysUser.birthday,'yyyy-MM-dd')}"/>
        <td>
            <a th:href="|SystemUserController/systemUserById/${sysUser.id}|">编辑</a>
            <a href="javascript:void(0)" th:onclick="|deleteSysUser(${sysUser.id})|">删除</a>
        </td>
    </tr>
</table>

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li th:class="|page-item ${page.current==1 || page.current <=0 ?'disabled':''}|">
            <a class="page-link"
               th:href="@{|/SystemUserController/systemUserPage/${page.current-1}}|"
               aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>

        <li class="page-item" th:each="index : ${#numbers.sequence(1,page.pages)}">
            <a class="page-link" th:href="@{|/SystemUserController/systemUserPage/${index}|}">[[${index}]]</a>
        </li>

        <li th:class="|page-item ${page.current==page.pages || page.current>=page.pages?'disabled':''}|">
            <a class="page-link"
               th:href="@{|/SystemUserController/systemUserPage/${page.current+1}}|"
               aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
        &nbsp;
        <li class="page-item"><a class="page-link" href="javascript:void(0)">共 <span th:text="${page.pages}"></span>页</a></li>
    </ul>
    想跳转到第
    <input type="number" id="jumpPage" value="1" size="3">页
    &nbsp;&nbsp;
    <br>
    <button class="btn-info" th:onclick="jumpPage()">跳转</button>
</nav>


</body>
</html>